import { RbacRoleType } from '@/data/auth/role';
import { useMenus } from '@/hooks/auth/useMenus';
import { list } from '@/services/data';
import { ProCard, ProList } from '@ant-design/pro-components';
import { Button, Modal, Tree } from 'antd';
import React, { useEffect, useState } from 'react';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<RbacRoleType> & {
    targetKeys?: React.Key[];
  };

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<RbacRoleType>;
};

const AddMenuModal: React.FC<UpdateFormProps> = (props) => {
  const { allMenu } = useMenus();
  const [treeData, setTreeData] = useState([]);
  const [expandedKeys, setExpandedKeys] = useState<any>([]);

  const initialTargetKeys: React.Key[] | (() => React.Key[]) = [];
  const [targetKeys, setTargetKeys] = useState<React.Key[]>(initialTargetKeys);

  useEffect(() => {
    const fetchData = async () => {
      const roleId = props.values.id;
      const hasMenuList = await list('/system/rbacRoleMenuBtn', { roleId, correlationType: 1 });
      const hasMenuIdList = hasMenuList?.list?.map((btn: any) => btn.menuOrBtnId) || [];

      setTargetKeys(hasMenuIdList);
    };
    if (props.updateModalVisible && props.values.id) fetchData();
  }, [props.values, props.updateModalVisible]);

  const handleOk = async () => {
    await props.onSubmit({ targetKeys });
  };

  return (
    <Modal
      width={1200}
      style={{
        padding: '32px 40px 48px',
      }}
      title="授权"
      open={props.updateModalVisible}
      onCancel={() => {
        props.onCancel();
      }}
      onOk={handleOk}
    >
      <ProCard split="vertical">
        <ProCard colSpan="20%">
          <Tree
            showIcon
            checkable
            checkStrictly
            treeData={treeData}
            expandedKeys={expandedKeys}
            // onSelect={onSelect}
            // onRightClick={onRightClick}
            // onExpand={handleExpand}
            // onCheck={onCheck}
            // checkedKeys={checkedKey ? [checkedKey] : []}
          />
        </ProCard>
        <ProCard split="horizontal">
          <ProList<{ title: string }>
            toolBarRender={() => {
              return [
                <Button key="3" type="primary">
                  新建
                </Button>,
              ];
            }}
            metas={{
              title: {},
              description: {
                render: () => {
                  return 'Ant Design, a design language for background applications, is refined by Ant UED Team';
                },
              },
              avatar: {},
              extra: {
                render: () => (
                  <div
                    style={{
                      minWidth: 200,
                      flex: 1,
                      display: 'flex',
                      justifyContent: 'flex-end',
                    }}
                  >
                    <div
                      style={{
                        width: '200px',
                      }}
                    >
                      <div>发布中</div>
                    </div>
                  </div>
                ),
              },
              actions: {
                render: () => {
                  return [<a key="init">邀请</a>, '发布'];
                },
              },
            }}
            rowKey="title"
            headerTitle="支持选中的列表"
            // rowSelection={rowSelection}
            // dataSource={dataSource}
          />
        </ProCard>
      </ProCard>
    </Modal>
  );
};

export default AddMenuModal;
